<template>
  <div class="allOrderContainer">
    <!-- 头部搜索部分 -->
    <div class="orderHeader">
      <div class="orderSearch">
        <el-form ref="form" :model="orderSearch" :inline="true">
          <el-form-item label="设备名称" size="mini">
            <el-input v-model="orderSearch.name" placeholder="请输入设备名称" />
          </el-form-item>
          <el-form-item label="设备编号" size="mini">
            <el-input
              v-model="orderSearch.serial_number"
              placeholder="请输入设备编号"
            />
          </el-form-item>
          <el-form-item label="设备厂商" size="mini">
            <el-input
              v-model="orderSearch.manufacturer"
              placeholder="请输入设备厂商"
            />
          </el-form-item>
          <el-form-item size="mini">
            <el-button
              type="primary"
              icon="el-icon-search"
              data-tracker="P33-1"
              @click="CompanyGpsListFn(1, 10)"
              >查询</el-button
            >
            <el-button
              icon="el-icon-refresh-left"
              data-tracker="P33-2"
              @click="resulteClickFn"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 订单操作 -->
    <div class="actions">
      <div class="left">
        <el-button
          v-permission="'company_gps_create'"
          style="margin: 0px 0px 10px 0px"
          data-tracker="P33-3"
          type="primary"
          plain
          size="mini"
          @click="AddGPSClickFn"
          ><i class="el-icon-plus"></i> 新增</el-button
        >
      </div>
      <div class="right">
        <el-pagination
          background
          style="margin: 0px 0px 10px 0px"
          small
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalListNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :max-height="maxheight"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      border
      stripe
    >
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column property="manufacturer" label="生产厂家" width="220">
      </el-table-column>
      <el-table-column property="serial_number" label="编号" width="180">
      </el-table-column>
      <el-table-column property="branch_name" label="名称" width="180">
      </el-table-column>
      <el-table-column property="gps_type" label="类型" width="150">
      </el-table-column>
      <el-table-column property="shared" label="是否对外共享" width="200">
      </el-table-column>
      <el-table-column property="ownership_type" label="分类" width="100">
      </el-table-column>
      <el-table-column property="status" label="启用状态" width="100">
      </el-table-column>
      <el-table-column property="shared_website" label="共享网点" width="250">
        <template slot-scope="scope">
          <span
            v-for="item in scope.row.shared_website"
            :key="item.id"
            style="display: block; float: left; margin-left: 10px"
            >{{ item.name }}</span
          >
        </template>
      </el-table-column>
      <el-table-column property="remark" label="备注" width="300">
      </el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-permission="'company_gps_detail'"
            size="mini"
            type="text"
            data-tracker="P33-4"
            @click="handleDetailFn(scope.row)"
            >详情</el-button
          >
          <el-button
            v-permission="'company_gps_update'"
            type="text"
            size="mini"
            data-tracker="P33-5"
            @click="handleEditchildren(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-permission="'company_gps_delete'"
            size="mini"
            type="text"
            data-tracker="P33-6"
            @click="handleDeleteFn(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      title="新增GPS设备"
      :visible.sync="drawerGPSShow"
      :direction="direction"
      :before-close="handleClose"
      size="40%"
      :wrapperClosable="false"
    >
      <div style="padding: 0 20px" class="form_content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <div class="color_bg">
            <el-form-item label="生产厂家" prop="manufacturer">
              <el-input v-model="ruleForm.manufacturer"></el-input>
            </el-form-item>
            <el-form-item label="设备编号" prop="serial_number">
              <el-input v-model="ruleForm.serial_number"></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="branch_name">
              <el-input v-model="ruleForm.branch_name"></el-input>
            </el-form-item>
            <el-form-item label="设备类型" prop="gps_type">
              <el-select v-model="ruleForm.gps_type">
                <el-option
                  v-for="(item, index) in GpsTypeData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备分类" prop="ownership_type">
              <el-select v-model="ruleForm.ownership_type">
                <el-option
                  v-for="(item, index) in ownershiptype"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="网点ID" prop="branch_id">
              <el-select v-model="ruleForm.branch_id">
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="共享网点" prop="shared_website">
              <el-select multiple v-model="ruleForm.shared_website">
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否对外共享" prop="shared">
              <el-select v-model="ruleForm.shared">
                <el-option
                  v-for="(item, index) in SelectData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否禁用" prop="status">
              <el-select v-model="ruleForm.status">
                <el-option
                  v-for="(item, index) in OpitonsData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="ruleForm.remark"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="footer_GPS">
        <div style="margin: 0 auto">
          <el-button
            id="orderSave"
            data-tracker="P33-7"
            type="primary"
            plain
            size="mini"
            @click="drawerCreateClickFn"
            >保存</el-button
          >
          <el-button
            id="orderCancel"
            data-tracker="P33-8"
            @click="drawerGPSShow = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="编辑GPS设备"
      :visible.sync="drawerGPSEditShow"
      :direction="direction"
      :before-close="handleCloseEdit"
      size="40%"
      :wrapperClosable="false"
    >
      <div style="padding: 0 20px" class="form_content">
        <el-form
          :model="ruleFormEdit"
          :rules="rulesEdit"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <div class="color_bg">
            <el-form-item label="生产厂家" prop="manufacturer">
              <el-input v-model="ruleFormEdit.manufacturer"></el-input>
            </el-form-item>
            <el-form-item label="设备编号" prop="serial_number">
              <el-input v-model="ruleFormEdit.serial_number"></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="branch_name">
              <el-input v-model="ruleFormEdit.branch_name"></el-input>
            </el-form-item>
            <el-form-item label="设备类型" prop="gps_type">
              <el-select v-model="ruleFormEdit.gps_type">
                <el-option
                  v-for="(item, index) in GpsTypeData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备分类" prop="ownership_type">
              <el-select v-model="ruleFormEdit.ownership_type">
                <el-option
                  v-for="(item, index) in ownershiptype"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="网点ID" prop="branch_id">
              <el-select v-model="ruleFormEdit.branch_id">
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="共享网点" prop="shared_website">
              <el-select multiple v-model="ruleFormEdit.shared_website">
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否对外共享" prop="shared">
              <el-select v-model="ruleFormEdit.shared">
                <el-option
                  v-for="(item, index) in SelectData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否禁用" prop="status">
              <el-select v-model="ruleFormDetail.status">
                <el-option
                  v-for="(item, index) in OpitonsData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                v-model="ruleFormEdit.remark"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="footer_GPS">
        <div style="margin: 0 auto">
          <el-button
            id="orderSave"
            data-tracker="P33-9"
            type="primary"
            plain
            size="mini"
            @click="drawerEditClickFn"
            >保存</el-button
          >
          <el-button
            id="orderCancel"
            data-tracker="P33-10"
            @click="drawerGPSEditShow = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="GPS设备详情"
      :visible.sync="drawerGPSDetailShow"
      :direction="direction"
      :before-close="handleCloseDetail"
      size="40%"
      :wrapperClosable="false"
    >
      <div style="padding: 0 20px" class="form_content">
        <el-form
          :model="ruleFormDetail"
          :rules="rulesDetail"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <div class="color_bg">
            <el-form-item label="生产厂家" prop="manufacturer">
              <el-input
                v-model="ruleFormDetail.manufacturer"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="设备编号" prop="serial_number">
              <el-input
                v-model="ruleFormDetail.serial_number"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="branch_name">
              <el-input
                v-model="ruleFormDetail.branch_name"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="设备类型" prop="gps_type">
              <el-select v-model="ruleFormDetail.gps_type" disabled>
                <el-option
                  v-for="(item, index) in GpsTypeData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备分类" prop="ownership_type">
              <el-select v-model="ruleFormDetail.ownership_type" disabled>
                <el-option
                  v-for="(item, index) in ownershiptype"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="网点ID" prop="branch_id">
              <el-select v-model="ruleFormDetail.branch_id" disabled>
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="共享网点" prop="shared_website">
              <el-select v-model="ruleFormDetail.shared_website" disabled>
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否对外共享" prop="shared">
              <el-select v-model="ruleFormDetail.shared" disabled>
                <el-option
                  v-for="(item, index) in SelectData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否禁用" prop="status">
              <el-select v-model="ruleFormDetail.status" disabled>
                <el-option
                  v-for="(item, index) in OpitonsData"
                  :key="index"
                  :value="item.item_code"
                  :label="item.item_name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                v-model="ruleFormDetail.remark"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { PagewebsiteList } from "../common/common";
import {
  CompanyGpsList,
  CompanyGpsDelete,
  CompanyGpsCreate,
  CompanyGpsUpdate,
  CompanyGpsDetail,
} from "@/api/gpsequipment";
import { reqDictionaryOptions } from "@/api/earlywarning";
export default {
  name: "gpsequipment",
  data() {
    return {
      drawerGPSShow: false,
      drawerGPSEditShow: false,
      drawerGPSDetailShow: false,
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 20, //一页多少条
      direction: "rtl",
      orderSearch: {
        name: "",
        serial_number: "",
        manufacturer: "",
      },
      childId: "",
      ruleForm: {
        manufacturer: "",
        serial_number: "",
        branch_name: "",
        gps_type: "",
        branch_id: "",
        shared_website: "",
        ownership_type: "",
        shared: "",
        status: "",
        remark: "",
      },
      rules: {},
      ruleFormEdit: {
        manufacturer: "",
        serial_number: "",
        branch_name: "",
        gps_type: "",
        branch_id: "",
        shared_website: "",
        ownership_type: "",
        shared: "",
        status: "",
        remark: "",
      },
      rulesEdit: {},
      ruleFormDetail: {
        manufacturer: "",
        serial_number: "",
        branch_name: "",
        gps_type: "",
        branch_id: "",
        shared_website: "",
        ownership_type: "",
        shared: "",
        status: "",
        remark: "",
      },
      rulesDetail: {},
      tableData: [],
      originList: [],
      OpitonsData: [],
      SelectData: [],
      GpsTypeData: [],
      ownershiptype: [],
      maxheight: "auto",
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.CompanyGpsListFn(this.pageNum, this.pageSize);
    this.siteListFn();
    this.SelectOpitonsFn();
    this.SelectDataFn();
    this.GpsTypeDataFn();
    this.ownershiptypeDataFn();
  },
  methods: {
    // 获取下拉框数据
    SelectOpitonsFn() {
      const data = {
        dictionary_code: "is_enable",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.OpitonsData = res.data.list;
        }
      });
    },
    SelectDataFn() {
      const data = {
        dictionary_code: "is_Externalsharing",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.SelectData = res.data.list;
        }
      });
    },
    // GPS类型
    GpsTypeDataFn() {
      const data = {
        dictionary_code: "GpsType",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.GpsTypeData = res.data.list;
        }
      });
    },
    // GPS 分类
    ownershiptypeDataFn() {
      const data = {
        dictionary_code: "ownership_type",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.ownershiptype = res.data.list;
        }
      });
    },
    // 组织管理页面
    siteListFn() {
      // var sitL = PagewebsiteList("0")
      // this.originList = sitL
      PagewebsiteList("0").then((res) => {
        var res = res.data;
        for (var j = 0; j < res.length; j++) {
          this.originList.push({
            value: res[j].id,
            label: res[j].name,
          });
        }
      });
    },
    //新增GPS设备
    AddGPSClickFn() {
      this.drawerGPSShow = true;
    },
    //关闭新增
    handleClose() {
      this.drawerGPSShow = false;
    },
    //新增GPS设备 保存
    drawerCreateClickFn() {
      const data = {
        manufacturer: this.ruleForm.manufacturer,
        serial_number: this.ruleForm.serial_number,
        name: this.ruleForm.branch_name,
        gps_type: this.ruleForm.gps_type,
        branch_id: this.ruleForm.branch_id.toString(),
        shared_website: this.ruleForm.shared_website,
        ownership_type: this.ruleForm.ownership_type,
        shared: this.ruleForm.shared,
        status: this.ruleForm.status,
        remark: this.ruleForm.remark,
      };
      CompanyGpsCreate(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "创建GPS设备成功",
            type: "success",
          });
          this.drawerGPSShow = false;
          this.CompanyGpsListFn(this.pageNum, this.pageSize);
        }
      });
    },
    //编辑GPS设备
    handleEditchildren(dataobj) {
      this.drawerGPSEditShow = true;
      this.childId = dataobj.id;
      const data = {
        id: dataobj.id,
      };
      CompanyGpsDetail(data).then((res) => {
        if (res.code === 10000) {
          this.ruleFormEdit.manufacturer = res.data.manufacturer;
          this.ruleFormEdit.serial_number = res.data.serial_number;
          this.ruleFormEdit.branch_name = res.data.name;
          this.ruleFormEdit.gps_type = res.data.gps_type;
          (this.ruleFormEdit.branch_id = res.data.branch_id.toString()),
            (this.ruleFormEdit.shared_website = res.data.shared_website);
          this.ruleFormEdit.ownership_type = res.data.ownership_type;
          this.ruleFormEdit.shared = res.data.shared;
          this.ruleFormEdit.status = res.data.status;
          this.ruleFormEdit.remark = res.data.remark;
        }
      });
    },
    //编辑保存
    drawerEditClickFn() {
      const data = {
        manufacturer: this.ruleFormEdit.manufacturer,
        serial_number: this.ruleFormEdit.serial_number,
        branch_name: this.ruleFormEdit.branch_name,
        gps_type: this.ruleFormEdit.gps_type,
        branch_id: this.ruleFormEdit.branch_id,
        shared_website: this.ruleFormEdit.shared_website,
        ownership_type: this.ruleFormEdit.ownership_type,
        shared: this.ruleFormEdit.shared,
        status: this.ruleFormEdit.status,
        remark: this.ruleFormEdit.remark,
      };
      CompanyGpsUpdate(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "编辑GPS设备成功",
            type: "success",
          });
          this.drawerGPSEditShow = false;
          this.CompanyGpsListFn(this.pageNum, this.pageSize);
        }
      });
    },
    handleCloseEdit() {
      this.drawerGPSEditShow = false;
    },
    handleDetailFn(val) {
      this.drawerGPSDetailShow = true;
      const data = {
        id: val.id,
      };
      CompanyGpsDetail(data).then((res) => {
        if (res.code === 10000) {
          this.ruleFormDetail.manufacturer = res.data.manufacturer;
          this.ruleFormDetail.serial_number = res.data.serial_number;
          this.ruleFormDetail.branch_name = res.data.branch_name;
          this.ruleFormDetail.gps_type = res.data.gps_type;
          this.ruleFormDetail.branch_id = res.data.branch_id;
          this.ruleFormDetail.shared_website = res.data.shared_website;
          this.ruleFormDetail.ownership_type = res.data.ownership_type;
          this.ruleFormDetail.shared = res.data.shared;
          this.ruleFormDetail.status = res.data.status;
          this.ruleFormDetail.remark = res.data.remark;
        }
      });
    },
    //详情
    handleCloseDetail() {
      this.drawerGPSDetailShow = false;
    },
    //删除数据字典
    handleDeleteFn(rowval) {
      const idsData = [];
      idsData.push(rowval);
      const dataId = {
        id: idsData,
      };
      CompanyGpsDelete(dataId).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.CompanyGpsListFn(this.pageNum, this.pageSize);
        }
      });
    },
    //重置按钮操作函数
    resulteClickFn() {
      this.orderSearch.name = "";
      this.orderSearch.manufacturer = "";
      this.orderSearch.serial_number = "";
      this.CompanyGpsListFn(this.pageNum, this.pageSize);
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.CompanyGpsListFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.CompanyGpsListFn(this.pageNum, this.pageSize);
    },
    //GPS设备列表函数
    CompanyGpsListFn(pageNumval, pageSizeval) {
      const data = {
        name: this.orderSearch.name,
        manufacturer: this.orderSearch.manufacturer,
        serial_number: this.orderSearch.serial_number,
        page: pageNumval,
        page_size: pageSizeval,
      };
      CompanyGpsList(data).then((res) => {
        if (res.code === 10000) {
          this.tableData = res.data.list || [];
          if (this.tableData.length > 6) {
            //两排操作栏
            this.maxheight = document.documentElement.clientHeight - 265;
          } else {
            this.maxheight = "auto";
          }
          this.pageNum = res.data.pagination.current_page;
          this.totalListNum = res.data.pagination.total;
          this.pageSize = res.data.pagination.per_page_count;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.allOrderContainer {
  padding: 10px 15px;
  background-color: #fff;
}
.footer_GPS {
  width: 100%;
  font-size: 12px;
  text-align: center;
  background: #fff;
  z-index: 9;
}
</style>
